<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px;">
			<img class="pl-2 mt-5" src="static/logo.png" style="width: 287px;height: 68px;" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录上游端</view>
			<view class="pl-2 pr-2 lineHight-3">
				<!-- <u-field v-model="mobile" label="手机号" placeholder="请输入所绑定的手机号">
				</u-field>
				<u-field v-model="code" label="验证码" placeholder="输入验证码">
					<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
				</u-field> -->
				<view class="pl-3">
					<u-form :model="form" ref="uForm">
						<u-form-item required label="手机号" label-width="180" prop="mobile">
							<u-input class="mr-3 " maxlength="11" placeholder="请输入手机号" v-model="form.mobile"
								input-align="right" />
						</u-form-item>
						<u-form-item required label="验证码" label-width="180" prop="code">
							<u-input class="mr-3 " placeholder="请输入验证码" v-model="form.code" input-align="right" />
							<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
						</u-form-item>
					</u-form>
				</view>


				<u-toast ref="uToast"></u-toast>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
					@change="codeChange"></u-verification-code>


			<view class="u-inline-block dfes">
				<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
				<view  class="text-primary" @click="open('login/serviceAgreement')">《服务协议》</view>
				<view  class="text-primary" @click="open('login/serviceAgreement')">《隐私政策》</view>
			</view>
			</view>

			<view class="pl-3 pr-3 ">
				<u-button shape="circle" @click="login" type="success">登录</u-button>
			</view>

			<!-- <view class="text-right pr-5 mt-4" @click="open('touristMode/index/index')">
				<u-icon name="google" color="#08C060" size="28"></u-icon>游客登录
			</view> -->
			<view class="text-center mt-3">
				<view class="font-13 text-999999 mt-2">其他登录方式</view>
				<view class=" m-2" @click="open('login/login')">
					<i class="p-1 iconfont icon-mima font-28 main-text-color border-s"></i>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				codeText: '',
			    form:{
					mobile: '', // 手机号
					code: '', // 验证码
				},
				seconds: 60,
				agreementChecked: true, // 是否同意协议
				rules: {
					mobile: [{
							required: true,
							message: '手机号码不能为空',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]*$/; // 只允许输入数字
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					],

					code: [{
						required: true,
						message: '验证码不能为空',
						trigger: ['change', 'blur'],
					}, ]
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			validatePhoneNumber(phoneNumber) {
				const regex = /^1\d{10}$/;
				return regex.test(phoneNumber);
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.form.mobile.length == 0) {
						uni.showToast({
							title: "请填写手机号码",
							icon: "error"
						});
						return;
					}
					if (!this.validatePhoneNumber(this.form.mobile)) {
						uni.showToast({
							title: "手机号码格式错误",
							icon: "error"
						});
						return;
					}
					// 模拟向后端请求验证码
					this.sendSms();

				} else {
					this.$u.toast('请等待倒计时结束以后再重新发送');
				}
			},
			sendSms() {
				uni.showLoading({
					title: '发送中'
				});
				$H.get('/brand/user/upper/sendSms?phone=' + this.form.mobile, {}, {
						token: false
					})
					.then(res => {
						uni.hideLoading();
						if (!res.success || res.code != 200) {
							uni.showToast({
								title: res.message || '获取验证码失败',
								icon: 'error'
							});
							return;
						}
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(err => {
						uni.hideLoading();
					})

			},
			login() {
				if (!this.agreementChecked) {
					uni.showToast({
						title: '请阅读并同意《服务协议》《隐私政策》',
						icon: 'none'
					});
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {

						if (this.form.mobile.length == 0) {
							uni.showToast({
								title: "请填写手机号码",
								icon: "error"
							});
							return;
						}
						if (!this.validatePhoneNumber(this.form.mobile)) {
							uni.showToast({
								title: "手机号码格式错误",
								icon: "error"
							});
							return;
						}
						if (this.form.code.length == 0) {
							uni.showToast({
								title: "请填写验证码",
								icon: "error"
							});
							return;
						}
						uni.showLoading({
							title: '登录中'
						});
						$H.post('/brand/user/upper/phoneLogin?captcha=' + this.form.code + "&phone=" + this
								.form.mobile, {}, {
									token: false
								})
							.then(res => {
								if (!res.success) {
									uni.showToast({
										title: res.message || '登录失败',
										icon: 'error'
									});
									return;
								}
								uni.showToast({
									title: '登录成功！',
									icon: 'success'
								});
								$U.setStorage('token', res.result.token);
								$U.setStorage('phone', res.result.phone);
								$U.setStorage('legalRepresentative', res.result.legalRepresentative);
								$U.setStorage('id', res.result.id);
								$U.setStorage('enterpriseName', res.result.enterpriseName);
								$U.setStorage('avatar', res.result.avatar);

								// 登录成功后跳转到首页
								uni.switchTab({
									url: '/pages/tabbar/index/index'
								});
							})
							.catch(error => {
								console.log("12123123", error);
								console.error('请求出错', error); // 处理任何错误  
								uni.showToast({
									title: '登录失败',
									icon: 'none'
								});
							});

					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				})
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
		}
	};
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #FFC251 !important;
	}
</style>